<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}"
          type="image/x-icon">
    <title>登录</title>
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/default.css') }}">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        html {
            display: table;
            margin: auto;
        }

        body {
            display: table-cell;
            vertical-align: middle;
        }

        .margin {
            margin: 0 !important;
        }

        .red {
            background-color: #36f4e7 !important;
        }

        .card-panel {
            width: 353px !important;
        }
    </style>
</head>
<body class="red">
<div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
        <form class="login-form" method="POST" role="form"  action="{{ url_for('main.login') }}"  onsubmit="return check_login()">
            {% for category, message in get_flashed_messages(with_categories=true) %}
                <div class="row">
                    <div class="alert alert-{{ category }} alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{ message }}
                    </div>
                </div>
            {% endfor %}
            <div class="row">
                <div class="input-field col s12 center">
{#                    <img src="http://w3lessons.info/logo.png" alt=""#}
{#                         class="responsive-img valign profile-image-login">#}
                    <h2 class="center login-form-text">用户登录</h2>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-social-person-outline prefix"></i>
                    <input class="validate" id="email" name="email" type="email">
                    <label for="email" data-error="wrong" data-success="right"
                           class="center-align">邮箱</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-action-lock-outline prefix"></i>
                    <input id="password" name="password" type="password">
                    <label for="password">密码</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m12 l12  login-text">
                    <input type="checkbox" id="remember-me"/>
                    <label for="remember-me">记住我</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <button  type="submit"
                       class="btn waves-effect waves-light col s12">登　录</button>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6 m6 l6">
                    <p class="margin medium-small"><a
                            href="{{ url_for('main.signin') }}">现在注册!</a>
                    </p>
                </div>
                <div class="input-field col s6 m6 l6">
                    <p class="margin right-align medium-small"><a
                            href="{{ url_for('main.forget_password') }}">忘记密码?</a>
                    </p>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
<script src="/static/js/jquery-2.1.1.min.js"></script>
<!--materialize js-->
<script src="/static/layer-v3.5.1/layer.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script type="text/javascript">
    function check_login() {
        console.log("####################")
        var name = $("#email").val().trim();
        var pass = $("#password").val().trim();
        var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        if (name === "") {
            console.log(name);
            layer.msg("邮箱账号不能为空！");
            return false;
        }
        if (pass === "") {
            console.log(pass);
            layer.msg("密码不能为空！");
            return false;
        }
        if (name !== "" && pass !== "") {
            if (!regEmail.test(name)) {
                layer.msg("邮箱格式错误！");
                return false;
            }
            if (pass.length < 8) {
                layer.msg("账号或密码有误！");
                return false;
            }
            return true;
        }
    }

    function check_register() {
        var name = $("#r_user_name").val();
        var pass = $("#r_password").val();
        var email = $("r_email").val();
        if (name != "" && pass == "" && email != "") {
            alert("注册成功！");
            $("#user_name").val("");
            $("#password").val("");
        } else {
            $("#login_form").removeClass('shake_effect');
            setTimeout(function () {
                $("#login_form").addClass('shake_effect')
            }, 1);
        }
    }

    $(function () {
        $("#create").click(function () {
            check_register();
            return false;
        })
        $('.message a').click(function () {
            $('form').animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 'slow');
        });
    })
</script>
</body>
</html>